import { useRef, useState } from 'react';
import { Space, Popconfirm, Button } from 'antd';
import ProTableComp, { type ColumnsType, type ToolsType } from '@/components/ProTableComp';
import FormModal from './FormModal';
import { recoveryList, recoveryTransaction, recoveryChannel } from '@/api/modules/recovery';
import { getAccountTag } from '@/api/modules/common';
import { adminUserAll } from '@/api/modules/adminUser';

import "./index.less";

const Page = () => {
	const actionRef: any = useRef();
	const modalRef: any = useRef();

	const handleEdit = (record: any) => {
		modalRef.current.showDetail(record.id);
	};
	const [columns, setColumns]: any = useState([]);

	const getColumns = ({
        transacionRes = {},
        channelRes = {},
        allUserRes = {},
	}: any): ColumnsType[] => {
		return [{
			title: '回收编号',
			dataIndex: 'recovery_sn',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '游戏账号',
			dataIndex: 'account',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '手机号',
			dataIndex: 'mobile',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '回收账号状态',
			dataIndex: 'account_status',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '支付方式',
			dataIndex: 'pay_type',
			hideTable: true,
			valueType: 'text',
			placeholder: '支付方式',
		}, {
			title: '订单状态',
			dataIndex: 'status',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '类型',
			dataIndex: 'type',
			hideTable: true,
			valueType: 'text',
		}, {
			title: '回收人员',
			dataIndex: 'recovery_staff_id',
			hideTable: true,
			valueType: 'user',
			options: allUserRes.data,
		}, {
			title: '绑定人员',
			dataIndex: 'bind_id',
			hideTable: true,
			valueType: 'user',
			options: allUserRes.data,
		}, {
			title: '回收渠道',
			dataIndex: 'recovery_channel_id',
			hideTable: true,
			valueType: 'text',
			options: channelRes.data,
		}, {
			title: '交易方式',
			dataIndex: 'transaction_mode_id',
			hideTable: true,
			valueType: 'text',
			options: transacionRes.data,
		}, {
			title: '回收时间',
			dataIndex: 'recovery_time',
			hideTable: true,
			valueType: 'dateRange',
		}, {
			title: '回收价',
			dataIndex: 'recovery_price',
			hideTable: true,
			valueType: 'moneyRange',
		}, {
			title: '销售价',
			dataIndex: 'sale_price',
			hideTable: true,
			valueType: 'moneyRange',
		},
			
		// 列表部分
		{
			title: 'ID',
			dataIndex: 'id',
			width: 50,
			align: 'center',
		}, {
			title: '游戏',
			dataIndex: 'game',
			width: 180,
		}, {
			title: '支付方式',
			dataIndex: 'pay_type',
			width: 180,
		}, {
			title: '类型',
			dataIndex: 'type',
			width: 180,
		}, {
			title: '回收日期',
			dataIndex: 'recovery_time',
			width: 180,
		}, {
			title: '回收人员',
			dataIndex: 'recovery_staff',
			width: 180,
		}, {
			title: '换绑人员',
			dataIndex: 'bind_name',
			width: 180,
		}, {
			title: '回收编号',
			dataIndex: 'recovery_sn',
			width: 180,
		}, {
			title: '回收渠道',
			dataIndex: 'recovery_channel',
			width: 180,
		}, {
			title: '结款时间',
			dataIndex: 'payment_time',
			width: 180,
		}, {
			title: '回收账号状态',
			dataIndex: 'account_status',
			width: 180,
		}, {
			title: '订单状态',
			dataIndex: 'status',
			width: 180,
		}, {
			title: '是否包赔',
			dataIndex: 'pay_for',
			width: 180,
		}, {
			title: '游戏账号',
			dataIndex: 'account',
			width: 180,
		}, {
			title: '绑定手机号',
			dataIndex: 'mobile',
			width: 180,
		}, {
			title: '回收成本',
			dataIndex: 'recovery_price',
			width: 180,
		}, {
			title: '销售价',
			dataIndex: 'sale_price',
			width: 180,
		}, {
			title: '账号亮点',
			dataIndex: 'account_feature',
			width: 180,
		}, {
			title: '账号标签',
			dataIndex: 'account_tags',
			width: 180,
			render: (v: any) => {
				if (v && v.length) {
					return v.map((item: any) => item.name).join(', ');
				}
				return '-';
			},
		}, {
			title: '售后追溯备注',
			dataIndex: 'after_sales_remarks',
			width: 180,
		}, {
			title: '解冻时间',
			dataIndex: 'thawing_time',
			width: 180,
		}, {
			title: '操作记录',
			dataIndex: 'operation',
			width: 180,
			render: () => {
				return <Button type="text">查看操作记录</Button>
			},
		}, {
			title: '备注',
			dataIndex: 'remarks',
		}, {
			title: '创建时间',
			dataIndex: 'create_time',
			width: 180,
		}, {
			title: '操作',
			dataIndex: 'h',
			hideSearch: true,
			width: 180,
			fixed: 'right',
			render: (_, record) => (
				<Space>
					<Button onClick={() => handleEdit(record)} type="primary">编辑</Button>
					<Popconfirm
						title="确定删除吗?"
						onConfirm={() => {
							console.log(record);
						}}
					/>
				</Space>
			)
		}];
	};
	const tools: ToolsType[] = [
		{
			type: 'selectAndButton',
			text: '下载回收导入模板',
			compProps: { type: 'primary' },
			onClick: () => {}
		},
		{
			type: 'button',
			text: '导入回收订单',
			compProps: { type: 'primary' },
		},
		{
			type: 'button',
			text: '新增数据',
			compProps: { type: 'warning' },
			onClick: () => {
				modalRef.current.show({});
			}
		},
		{
			type: 'button',
			text: '暂存回收列表',
			compProps: { type: 'primary' },
		},
	];
	const gameLoad = async (gameRes: any) => {
		const asyncArr = [getAccountTag(), recoveryTransaction(), recoveryChannel(), gameRes, adminUserAll()];
		const [tagRes, transacionRes, channelRes, allGameRes, allUserRes] = await Promise.all(asyncArr);
		setColumns(getColumns({ transacionRes, channelRes, allUserRes }));
		modalRef.current.setOptionsMap((pre: any) => ({ ...pre, tagRes, transacionRes, channelRes, allGameRes, allUserRes }));
	};

	return (
		<div className="card content-box recovery-list">
			<ProTableComp
				actionRef={actionRef}
				tableName="回收列表"
				request={recoveryList}
				columns={!columns.length ? getColumns({}) : columns}
				tools={tools}
				isShowGameAll={true}
				gameLoad={gameLoad}
			/>
			<FormModal ref={modalRef} />
		</div>
	);
};

export default Page;
